<template>
  <div class="tui">
    <div class="left">
        <ul class="list" v-for="(v,i) in this.$store.state.list.obj" :key="i">
          <li @click="el='shouji'">
            <a :class="n==i?'action':''"  @click="n=i">
              <i>{{v.title}}</i>
            </a>
            </li>
        </ul>
    </div>
     <div class="right">
        <component :is="el"></component>
      </div>
  </div>
</template>

<script>
import youpin from "@/components/sort/youpin.vue"
import shouji from "@/components/sort/shouji.vue"
export default {
  data(){
    return {
      el:"youpin",
      n:0,
    }
  },
  methods:{
    
  },
  components:{
  youpin,
  shouji
  },
    created(){
      this.$store.dispatch("listing")
    }
    
};
</script>

<style scoped>
.tui {
  width: 100%;
  height: 100%;
  display: flex;
}
.tui .left {
  width: 20%;
    background-color: #fff;
    padding: 0.05rem;
    overflow-y: auto;
}
.tui .left .list{
     margin-top: 0.1rem;
    width: 0.82rem;
    height: 0.4rem;
    font-size: 0.16rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tui .left .list i{
  font-style: normal;
}
.tui .right {
  width: 70%;
  background-color: #fff;
  margin: 0.1rem;
  border-radius: 0.1rem;
  display: flex;
  
}
.action{
  background-color: #ff6700;
  color: #fff;
}
</style>